![Namecheap Takes Down Polyfill.io Service Following Supply Chain Attack](https://cdn.sanity.io/images/cgdhsj6q/production/6af25114feaaac7179b18127c83327568ff592d1-1024x1024.webp?w=800&fit=max&auto=format)
Security News
Namecheap Takes Down Polyfill.io Service Following Supply Chain Attack
Polyfill.io has been serving malware for months via its CDN, after the project's open source maintainer sold the service to a company based in China.
@ausbom/icon
Advanced tools
Readme
import { SystemIcon } from '@ausbom/icon';
import ArrowLeft16 from '@ausbom/icon/lib/icons/system/ArrowLeft16';
<SystemIcon
icon={ArrowLeft16}
size={16}
primaryColor="#1E1E1E"
secondaryColor="#707070"
/>
There are a number of system icons available as React components. You'll find them in @ausbom/icon/lib/icons/system
.
Each of these icon components can take a primaryColor
and secondaryColor
. While it's recommended to use them with the SystemIcon
component, it is possible to render them by themselves.
Example:
import { SystemIcon } from '@ausbom/icon';
import ArrowLeft16 from '@ausbom/icon/lib/icons/system/ArrowLeft16'
// Used as standalone
<ArrowLeft16 primaryColor="#1E1E1E" secondaryColor="#707070" />
// Used with SystemIcon
<SystemIcon
icon={ArrowLeft16}
size={16}
primaryColor="#1E1E1E"
secondaryColor="#707070"
/>
Each icon provided by the design system is intended to be used at a certain size. Make sure you're using an icon that is designed to be displayed at the size you need.
If your project needs an icon that isn't provided in the design system, you can still use SystemIcon
. The icon
property can take any React component that renders SVG.
Example:
import { SystemIcon } from '@ausbom/icon';
const MyCustomIcon = props => {
return (
<svg>
<path fill={props.primaryColor} class="__primary" ... />
<path fill={props.secondaryColor} class="__secondary" ... />
</svg>
)
}
// Used with SystemIcon
<SystemIcon
icon={MyCustomIcon}
size={16}
primaryColor="#1E1E1E"
secondaryColor="#707070"
/>
Elements inside system icon SVG's use the classes .__primary
and .__secondary
. This allows dual-coloured icons to be colourised by CSS if needed. This can be useful for things like hover states.
Add these classes to the correct elements for any dual-coloured icon components that you provide.
.my-component .icon {
.__primary {
fill: red;
}
.__secondary {
fill: blue;
}
}
FAQs
The icon component provides a refined set of functional icons to use in services and products. The icons are broken into three categories to help users navigate the service, identify important information and understand the forecast story.
The npm package @ausbom/icon receives a total of 87 weekly downloads. As such, @ausbom/icon popularity was classified as not popular.
We found that @ausbom/icon demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 5 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Polyfill.io has been serving malware for months via its CDN, after the project's open source maintainer sold the service to a company based in China.
Security News
OpenSSF is warning open source maintainers to stay vigilant against reputation farming on GitHub, where users artificially inflate their status by manipulating interactions on closed issues and PRs.
Security News
A JavaScript library maintainer is under fire after merging a controversial PR to support legacy versions of Node.js.